<template>
  <div>
    <!--<button type="primary" @click="payOrder">生成二维码</button>-->
    <div class="lightbox"
      append-to-body>
      <div class="paycode">
        <!-- 放置二维码的容器,需要给一个ref -->
        <div id="qrcode" ref="{{qrcode}}"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import QRCode from 'qrcodejs2'
    export default {
      props: {
        qrcode: String,
      },
      name: "JL-QRcodejs2",
      mounted(){
        // this.innerVisible = true
        this.$nextTick(() => {
          this.crateQrcode()
        })
      },
      methods: {
        // 展示二维码
        payOrder () {
          // 使用$nextTick确保数据渲染
          this.$nextTick(() => {
            this.crateQrcode()
          })
        },
        // 生成二维码
        crateQrcode () {
          this.qr = new QRCode('qrcode', {
            width: 150,
            height: 150, // 高度
            text: this.qrcode // 二维码内容
            // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
            // background: '#f0f'
            // foreground: '#ff0'
          })
          // console.log(this.qrcode)
        },
      }
    }
</script>

<style scoped>
    .maskLayer{
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: rgba(0,0,0,.8);
    }
    .lightbox { /*需要引起用户注意的元素*/
      position: absolute;
      left: 30%;
      top:30%;
      z-index: 1;
      width: 50%;
    }
</style>
